<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.indexedlist.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4718687_51sxwooy2cd.css" />
		<script src="js/mui.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript">
			mui.init({
			  gestureConfig:{
			   tap: true, //默认为true 单击
			   doubletap: true, //默认为false 双击
			   longtap: true, //默认为false	长按
			   swipe: false, //默认为true	滑动
			   drag: false, //默认为true		拖动
			   hold:false,//默认为false  按住屏幕
			   release:false//默认为false 离开屏幕
			  }
			})
			var fuser;
			mui.plusReady(function(){
				
				// 返回或者关闭页面:用户退出聊天室 更改状态
				var old_back = mui.back;
				mui.back = function(){
					util.ajax({
						url: api.comingOrLeave,
						data:{
							'tid': fuser.id,
							'type': 'out'
						},
						success:function(resp){
							
						}
					});
					//执行mui封装好的窗口关闭逻辑；
					old_back();
				}
				
				var user = plus.webview.currentWebview().data;
				fuser = user;
				if (user.remark != null && user.remark != "") {
					document.getElementById("mui-title").innerText = user.remark;
					// document.getElementById("other-name").innerText = user.remark;
				} else {
					document.getElementById("mui-title").innerText = user.nickname;
					// document.getElementById("other-name").innerText = user.nickname;
				}
				
				var me = util.getUser();
				
				//读取本地历史消息
				var msgArray = JSON.parse(plus.storage.getItem("chat_msg_history_"+me.id+"_"+user.id));
				
				if(msgArray != null){
					for(var i = 0; i<msgArray.length; i++){
						showMsg(msgArray[i]);
					}
				}
				
				//用户进入聊天室 更改状态
				util.ajax({
					url: api.comingOrLeave,
					data:{
						'tid': fuser.id,
						'type': 'in'
					},
					success:function(resp){
						
					}
				});
				
				// 初始化组件变量
				var ui = {
					body: document.querySelector('body'),
					footer: document.querySelector('footer'),
					footerRight: document.querySelector('.footer-right'),
					footerSend: document.querySelector('.footer-send'),
					footerLeft: document.querySelector('.footer-left'),
					btnMsgType: document.querySelector('#msg-type'),
					boxMsgText: document.querySelector('#msg-text'),
					emoji: document.querySelector('#msg-emoji'),
					emojiContent: document.querySelector('.emoji-content'),
					send: document.querySelector('#msg-send'),
					boxMsgSound: document.querySelector('#msg-sound'),
					btnMsgMenu: document.querySelector('#msg-menu'),
					areaMsgList: document.querySelector('#msg-list'),
					boxSoundAlert: document.querySelector('#sound-alert'),
					h: document.querySelector('#h'),
					content: document.querySelector('.mui-content'),
				}
				ui.h.style.width = ui.boxMsgText.offsetWidth + 'px';
				var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;
				
				// 设置聊天页面滑动到最下方
				var msgList = document.getElementById('msg-list');
				// 将滑动列表总高度-当前可见高度，得到容器应该滑到的高度
				msgList.scrollTop = msgList.scrollHeight - msgList.offsetHeight;
				
				// emoji表情包点击事件 弹出表情包选择器
				ui.emoji.addEventListener('click',function(event){
					ui.footer.style = 'bottom:300px; transition:bottom 0.2s ease-in-out';
					ui.emojiContent.style = 'bottom:0px; transition:bottom 0.2s ease-in-out';
					//显示键盘按钮
					document.getElementById("change_type2").style.display = 'block';
					ui.emoji.style.display = 'none';
					// todo 点击表情包按钮 消息要滑动到底部
					// msgList.scrollTop = msgList.scrollHeight - msgList.offsetHeight;
					ui.boxMsgText.blur();
				})	
				document.getElementById("change_type2").addEventListener('click',function(event){
					document.getElementById("change_type2").style.display = 'none';
					ui.emoji.style.display = 'block';
					ui.footer.style = 'bottom:0px; transition:bottom 0.2s ease-in-out';
					ui.emojiContent.style = 'bottom:-300px; transition:bottom 0.2s ease-in-out';
					ui.boxMsgText.focus();
				})		
				
						
				// 添加全局点击事件监听器
				document.addEventListener('click', function(event) {
					// 检查点击的目标是否是 ui.emoji 或其子元素
					if (!ui.emoji.contains(event.target) && !ui.emojiContent.contains(event.target) && event.target.tagName.toLowerCase() == 'textarea' || ui.send.contains(event.target)) {
						// 还原样式
						ui.footer.style = 'bottom:0px; transition:bottom 0.2s ease-in-out';	
						ui.emojiContent.style = 'bottom:-300px; transition:bottom 0.2s ease-in-out';
					}
				});
				
				// 获取所有表情包链接
				var emojiLinks = document.querySelectorAll('#msg-emoji-select a');
				// 为每个表情包链接添加点击事件监听器
				emojiLinks.forEach(function(link) {
					link.addEventListener('tap', function(event) {
						event.preventDefault(); // 阻止默认的链接跳转行为
						// 获取表情包内容
						var emoji = this.getAttribute('data-emoji');
						// 将表情包内容插入到输入框中
						ui.boxMsgText.value += emoji;
						// 显示发送按钮
						ui.boxMsgText.style = 'width:60%; transition:width 0.2s ease-in-out';
						ui.emoji.style = 'margin-left:-140px; transition:margin-left 0.2s ease-in-out';
						ui.btnMsgMenu.style = 'margin-left:-140px; transition:margin-left 0.2s ease-in-out';
						ui.send.style = 'right:5px; transition:right 0.2s ease-in-out';  
					});
				});
						
				// 更多按钮的点击事件
				ui.btnMsgMenu.addEventListener('tap',function(event) {
					alert('更多');
				});
					
				// 切换语音按钮
				document.getElementById("msg-type").addEventListener("tap",function(){
					document.getElementById("msg-type").style.display = 'none';
					document.getElementById("msg-text").style.display = 'none';
					document.getElementById("change_type").style.display = 'block';
					document.getElementById("msg-sound").style.display = 'block';
					ui.emoji.style = 'margin-left:0px; transition:margin-left 0.2s ease-in-out';
					ui.btnMsgMenu.style = 'margin-left:0px; transition:margin-left 0.2s ease-in-out';
					ui.send.style = 'right:-70px; transition:right 0.2s ease-in-out'; 
				})
					
				document.getElementById("change_type").addEventListener("tap",function(){
					document.getElementById("msg-type").style.display = 'block';
					document.getElementById("msg-text").style.display = 'block';
					document.getElementById("change_type").style.display = 'none';
					
					
					if (ui.boxMsgText.value.trim() !== ''){
						ui.boxMsgText.style = 'width:60%; transition:width 0.2s ease-in-out';
						ui.emoji.style = 'margin-left:-140px; transition:margin-left 0.2s ease-in-out';
						ui.btnMsgMenu.style = 'margin-left:-140px; transition:margin-left 0.2s ease-in-out';
						ui.send.style = 'right:5px; transition:right 0.2s ease-in-out'; 
					} 
				})
					
				// 设置发送按钮的点击事件
				ui.send.addEventListener('click',function(event) {
					
					//showKeyboard() 保持输入状态
					ui.boxMsgText.focus();
					
					// 点击发送按钮 发送消息
					// alert(ui.boxMsgText.value.replace(new RegExp('\n','gm'),'<br/>'));
					var me = util.getUser();
					// 消息类型
					var msgType = 1;
					// 封装消息对象
					var msgParam = {
						'type': 'msg',
						'content': encodeURIComponent(ui.boxMsgText.value),
						'fid': me.id, //发送人
						'tid': Number(user.id), //接收人
						'msgType': Number(msgType), // 消息类型 1文字 2图片 3语音
						'error': 0,
						'status': 0, //默认未读状态
					}

					// plus.nativeUI.toast(encodeURIComponent(ui.boxMsgText.value));	
					// 还原底部高度
					// ui.footer.style = 'height:50px;'+'transition:height 0.2s ease-in-out;';
					
					// 发送消息给服务端
					var indexPage = plus.webview.getWebviewById('index.html');
					indexPage.evalJS('sendContent('+JSON.stringify(msgParam)+')'); // 只能传字符串
					util.ajax({
						url: api.sendMsg,
						data: msgParam,
						success:function(resp){
							if (resp.code == 200 && resp.httpCode == 200) {
								// 保存消息到本地
								if(resp.data.isRead == 1){
									msgParam.status = 1;
								}
								showMsg(msgParam);
								saveMsg(msgParam);
							} else if(resp.code == 1){
								msgParam.error = 1;
								showMsg(msgParam);
								// 保存消息到本地
								saveMsg(msgParam);
								plus.nativeUI.toast(resp.msg);
							}
						},
						error:function(xhr,type,errorThrown){
							msgParam.error = 1;
							showMsg(msgParam);
							// 保存消息到本地
							saveMsg(msgParam);
						}
					});	
					
					if (ui.boxMsgText.value.trim() !== ''){
						// 显示信息
						// showMsg(msgParam);
						ui.boxMsgText.style = 'width:85%; transition:width 0.2s ease-in-out';
						ui.emoji.style = 'margin-left:0px; transition:margin-left 0.2s ease-in-out';
						ui.btnMsgMenu.style = 'margin-left:0px; transition:margin-left 0.2s ease-in-out';
						ui.send.style = 'right:-70px; transition:right 0.2s ease-in-out'; 
					} else {
						plus.nativeUI.toast("不能发送空白信息");
					}
					// 清空输入框
					ui.boxMsgText.value = '';
				})
				
				
				// 设置输入过程中文本框宽度的样式变化
				ui.boxMsgText.addEventListener('input',function(event){
					// ui.boxMsgText.style.width = '80%';
					if(ui.boxMsgText.value.trim() != ''){
						// ui.btnMsgMenu.classList[ui.boxMsgText.value == '' ? 'remove' : 'add']('mui-icon-paperplane');
						ui.boxMsgText.style = 'width:60%; transition:width 0.2s ease-in-out';
						ui.emoji.style = 'margin-left:-140px; transition:margin-left 0.2s ease-in-out'; 
						ui.btnMsgMenu.style = 'margin-left:-140px; transition:margin-left 0.2s ease-in-out;';
						ui.send.style = 'right:5px; transition:right 0.2s ease-in-out'; 
					} else {
						ui.boxMsgText.style = 'width:85%; transition:width 0.2s ease-in-out'; 
						ui.emoji.style = 'margin-left:0px; transition:margin-left 0.2s ease-in-out';
						ui.btnMsgMenu.style = 'margin-left:0px; transition:margin-left 0.2s ease-in-out';
						ui.send.style = 'right:-70px; transition:right 0.2s ease-in-out'; 
					}
					
					
					ui.btnMsgMenu.setAttribute("for",ui.boxMsgText.value == '' ? '' : 'msg-text');
					ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n','gm'), '\n-') || '-';
					ui.footer.style = 'height:'+(ui.h.offsetHeight + footerPadding) + 'px;'+'transition:height 0.3s ease-in-out;';
					ui.content.style.paddingBottom = ui.footer.style.height;
					ui.boxMsgText.style.height = 50 + (ui.h.offsetHeight); 
				});
				
				// -----------语音发送-------------
				// 设置弹出框的隐藏和显示
				var setSoundAlertVisable = function(show) {
					if(show) {
						ui.boxSoundAlert.style.display = 'block';
						ui.boxSoundAlert.style.opacity = 1;
					} else {
						ui.boxSoundAlert.style.opacity = 0;
						//fadeOut 完成再真正隐藏
						setTimeout(function() {
							ui.boxSoundAlert.style.display = 'none';
						},200);
					}
				};
				var audio_tips = document.getElementById('audio_tips');
				
				//设置 按住说话 的长按事件
				var recordCancel = false; // 是否取消的标识
				var startTimestamp = null;
				var stopTimestamp = null;
				ui.boxMsgSound.addEventListener('hold',function(event) {
					audio_tips.innerHTML = '手指上划，取消发送';
					recordCancel = false;
					ui.boxSoundAlert.classList.remove('rprogress-sigh');
					setSoundAlertVisable(true);
					startTimestamp = (new Date()).getTime();
					//----------开始录音-------
					
				},false);
				
				//设置上滑取消
				ui.body.addEventListener('drag',function(event) {
					if(Math.abs(event.detail.deltaY) > 50) {
						if(!recordCancel) {
							recordCancel = true;
							if(!audio_tips.classList.contains('cancel')) {
								audio_tips.classList.add('cancel');
							}
							audio_tips.innerHTML = "松开手指，取消发送";
						}
					} else {
						if (recordCancel) {
							recordCancel = false;
							if(!audio_tips.classList.contains('cancel')) {
								audio_tips.classList.remove('cancel');
							}
							audio_tips.innerHTML = "手指上划，取消发送";
						}
					}
				},false);
				
				ui.boxMsgSound.addEventListener('touchstart',function(e) {
					e.preventDefault();
				});
				
				//设置 按住说话 松开事件
				ui.boxMsgSound.addEventListener('release',function(event) {
					if(audio_tips.classList.contains('cancel')){
						audio_tips.classList.remove('cancel');
						audio_tips.innerHTML = "手指上划，取消发送";
					}
					stopTimestamp = (new Date()).getTime();
					if(!recordCancel && stopTimestamp - startTimestamp < 800) {
						audio_tips.innerHTML = "录音事件太短";
						ui.boxSoundAlert.classList.add('rprogress-sigh');
						recordCancel = true;
						stopTimer = setTimeout(function() {
							setSoundAlertVisable(false);
						})
					} else {
						setSoundAlertVisable(false);
					}
					// ---------结束录音--------
				}, false);
			});
			
			function showMsg(param){ 
				var html = '';
				var me = util.getUser();
				
				//如果是自己的 显示在右边 好友发的显示在左边
				if(me.id == param.fid) {
					//显示在右边
					
					html += '<div class="msg-item msg-item-self" msg-type="sound" msg-content="">';
					if (me.miniAvatar) {
						html += '<img class="msg-user-img" style="float: right;width: 40px;height: 40px;" src="'+me.miniAvatar+'" alt="" />';
					} else {
						html += '<img class="msg-user-img" style="float: right;width: 40px;height: 40px;" src="image/boy.png" alt="" />';
					}
					html += '<div class="msg-content" style="word-break: break-all;" value="'+decodeURIComponent(param.content)+'">';
					html += decodeURIComponent(param.content);
					if (param.error == 1 && param.error != undefined) {
						html += '<div class="msg-content-error" style="display: grid; place-items: center; font-size: 18px; width: 20px; height: 100%;">';
						html += '<div id="error" class="iconfont icon-chatyichang" style="font-size: 18px; width: 20px; height: 20px; display: inline-block; line-height: 100%;display:block"></div>';
						html += '</div>';
					} else {
						html += '<div class="msg-content-error" style="display: grid; place-items: center; font-size: 18px; width: 20px; height: 100%;">';
						html += '<div id="error" class="iconfont icon-chatyichang" style="font-size: 18px; width: 20px; height: 20px; display: inline-block; line-height: 100%;display:none"></div>';
						html += '</div>';
					}
					html += '<div class="msg-content-arrow" id="arrow"></div>';
					if (param.status == 0 || param.status == null) {
						html += '<div class="msg-read-status" id="msgStatus">未读</div>';
					} else if(param.status == 1){
						html += '<div class="msg-read-status" id="msgStatus" style="color:#999">已读</div>';
					}
					html += '</div>';		
					html += '<div class="mui-item-clear"></div>';	
					html += '</div>';
					
				} else {
					//显示在左边
					html += '<div class="msg-item msg-content" msg-type="sound" msg-content="">';
					if (fuser.miniAvatar) {
						html += '<img class="msg-user-img" style="float: left;width: 40px;height: 40px;" src="'+fuser.miniAvatar+'" alt="" />';
					} else {
						html += '<img class="msg-user-img" style="float: left;width: 40px;height: 40px;" src="" alt="" />';
					}
					if(fuser.type != 'singleChat'){ // 单聊时不显示对方昵称
						if (fuser.remark) {
							html += '<div class="msg-nickname" id="other-name">'+fuser.remark+'</div>';
						} else {
							html += '<div class="msg-nickname" id="other-name">'+fuser.nickname+'</div>';
						}
					}
					html += '<div class="msg-content" style="word-break: break-all;" value="'+decodeURIComponent(param.content)+'">';
					html += decodeURIComponent(param.content);
					html += '<div class="msg-content-inner">';
					html += '</div>';
					html += '<div class="msg-content-arrow"></div>';
					html += '</div>';
					html += '<div class="mui-item-clear"></div>';
					html += '</div>';
				}
				
				
				document.getElementById('msg-list').insertAdjacentHTML('beforeend',html);
				
				// 每条消息增加长按事件
				var contentLists = document.querySelectorAll('.msg-content');
				contentLists.forEach(function(link){
					link.addEventListener('longtap',function(event){
						event.preventDefault();
						var content = this.getAttribute('value')
						alert('哎哟 你干嘛~'+'\n'+content)
					})
				})
				
				// 确保消息列表滑动到最底部
				setTimeout(function() {
					var msgList = document.getElementById('msg-list');
					msgList.scrollTop = msgList.scrollHeight - msgList.offsetHeight;
				}, 0);
			}
			
			// 保存消息到本地
			function saveMsg(msg){
				var user = util.getUser();
				var array = JSON.parse(plus.storage.getItem("chat_msg_history_"+user.id+"_"+fuser.id));
				if(array === null){
					var array = new Array();
				}
				array.push(msg);
				plus.storage.setItem("chat_msg_history_"+user.id+"_"+fuser.id, JSON.stringify(array));
			}  
			
		</script>
	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav" style="box-shadow: none;background-color: #fff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="mui-title"></h1>
		</header>
		
		<pre id="h"></pre>
		<div class="mui-content">
			<!-- 聊天内容列表 -->
			<div id="msg-list">
				
				<!-- <div class="msg-item msg-content" msg-type='sound' msg-content=''>
					<img class="msg-user-img" style="float: left;width: 50px;height: 50px;" src="image/标签.png" alt="" />
					<div class="msg-nickname" id="other-name"></div>
					<div class="msg-content">
						<div class="msg-content-inner">
							<span class="play-state" style="word-break: break-all;">消息内容</span>
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				
				<div class="msg-item msg-item-self" msg-type='sound' msg-content=''>
					<img class="msg-user-img" style="float: right;width: 50px;height: 50px;" src="image/公众号.png" alt="" />
					<div class="msg-content">
						<div class="msg-content-inner">
							<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
							<span class="play-state">消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容</span>
						</div>
						<div class="msg-content-error" style="display: grid; place-items: center; font-size: 18px; width: 20px; height: 100%;">
						    <div class="iconfont icon-chatyichang" style="font-size: 18px; width: 20px; height: 20px; display: inline-block; line-height: 100%;"></div>
						</div>
						<div class="msg-content-arrow"></div>
						<div class="msg-read-status" id="msgStatus">未读</div> 
					</div>
					<div class="mui-item-clear"></div>
				</div> -->
			
			</div>
				
		</div>
		
		<footer>
			<div class="footer-left">
				<!-- 语音按钮 -->
				<i id="msg-type" class="iconfont icon-chatyuyin" style="width: 50px;height: 50px;"></i>
				<i id="change_type" class="iconfont icon-chatjianpan" style="width: 50px;height: 50px;display: none;"></i></div>
			<div class="footer-center">
				<!-- 输入框 -->
				<textarea id="msg-text" type="text" class="input-text"></textarea>
				<!-- 语音发送 -->
				<button id="msg-sound" type="button" class="input-sound" style="display: none;font-size: 16px;">按住 说话</button>
			</div>
			<label for="" class="footer-emoji">
				<!-- 表情包按钮 -->
				<i id="msg-emoji" class="iconfont icon-chatbiaoqing"></i>
				<i id="change_type2" class="iconfont icon-chatjianpan" style="display: none;"></i></div>
			</label>
			<!-- 发送按钮 -->
			<button for="" class="footer-send" id="msg-send">发送</button>
			<label for="" class="footer-right">
				<!-- 弹出框按钮 --> 
				<i id="msg-menu" class="iconfont icon-chatgengduo"></i>
			</label>
			
		</footer>
		
		<!-- <div style="width: 100%;height: 50px;">123456789</div> -->
		
		<!-- 语音发送弹出框 -->
		<div id="sound-alert" class="rprogress">
				<div class="rschedule"></div>
				<div class="r-sigh"></div>
				<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div>
		
			
			
			<div class="emoji-content">
				<div id="msg-emoji-select">
					<a href="#" data-emoji="☺">☺</a>
					<a href="#" data-emoji="😀">😀</a>
					<a href="#" data-emoji="😁">😁</a>
					<a href="#" data-emoji="😂">😂</a>
					<a href="#" data-emoji="🤣">🤣</a>
					<a href="#" data-emoji="😃">😃</a>
					<a href="#" data-emoji="😄">😄</a>
					<a href="#" data-emoji="😅">😅</a>
					
					<a href="#" data-emoji="😆">😆</a>
					<a href="#" data-emoji="😉">😉</a>
					<a href="#" data-emoji="😊">😊</a>
					<a href="#" data-emoji="😋">😋</a>
					<a href="#" data-emoji="😎">😎</a>
					<a href="#" data-emoji="😍">😍</a>
					<a href="#" data-emoji="😘">😘</a>
					<a href="#" data-emoji="😗">😗</a>
					
					<a href="#" data-emoji="😙">😙</a>
					<a href="#" data-emoji="😚">😚</a>
					<a href="#" data-emoji="☺">☺</a>
					<a href="#" data-emoji="🙂">🙂</a>
					<a href="#" data-emoji="🤗">🤗</a>
					<a href="#" data-emoji="🤩">🤩</a>
					<a href="#" data-emoji="🤔">🤔</a>
					<a href="#" data-emoji="🤨">🤨</a>
					
					<a href="#" data-emoji="😐">😐</a>
					<a href="#" data-emoji="😑">😑</a>
					<a href="#" data-emoji="😶">😶</a>
					<a href="#" data-emoji="🙄">🙄</a>
					<a href="#" data-emoji="😏">😏</a>
					<a href="#" data-emoji="😣">😣</a>
					<a href="#" data-emoji="😥">😥</a>
					<a href="#" data-emoji="😮">😮</a>
					
					<a href="#" data-emoji="🤐">🤐</a>
					<a href="#" data-emoji="😯">😯</a>
					<a href="#" data-emoji="😪">😪</a>
					<a href="#" data-emoji="😫">😫</a>
					<a href="#" data-emoji="😴">😴</a>
					<a href="#" data-emoji="😌">😌</a>
					<a href="#" data-emoji="😛">😛</a>
					<a href="#" data-emoji="😜">😜</a>
					
					<a href="#" data-emoji="😝">😝</a>
					<a href="#" data-emoji="🤤">🤤</a>
					<a href="#" data-emoji="😒">😒</a>
					<a href="#" data-emoji="😓">😓</a>
					<a href="#" data-emoji="😔">😔</a>
					<a href="#" data-emoji="😕">😕</a>
					<a href="#" data-emoji="🙃">🙃</a>
					<a href="#" data-emoji="🤑">🤑</a>
					
					<a href="#" data-emoji="😲">😲</a>
					<a href="#" data-emoji="😦">😦</a>
					<a href="#" data-emoji="🙁">🙁</a>
					<a href="#" data-emoji="😖">😖</a>
					<a href="#" data-emoji="😞">😞</a>
					<a href="#" data-emoji="😟">😟</a>
					<a href="#" data-emoji="😤">😤</a>
					<a href="#" data-emoji="😢">😢</a>
					
					<a href="#" data-emoji="😭">😭</a>
					<a href="#" data-emoji="😧">😧</a>
					<a href="#" data-emoji="😨">😨</a>
					<a href="#" data-emoji="😩">😩</a>
					<a href="#" data-emoji="🤯">🤯</a>
					<a href="#" data-emoji="😬">😬</a>
					<a href="#" data-emoji="😰">😰</a>
					<a href="#" data-emoji="😱">😱</a>
					
					<a href="#" data-emoji="😳">😳</a>
					<a href="#" data-emoji="🤪">🤪</a>
					<a href="#" data-emoji="😵">😵</a>
					<a href="#" data-emoji="😡">😡</a>
					<a href="#" data-emoji="😠">😠</a>
					<a href="#" data-emoji="🤬">🤬</a>
					<a href="#" data-emoji="😷">😷</a>
					<a href="#" data-emoji="🤒">🤒</a>
					
					<a href="#" data-emoji="🤕">🤕</a>
					<a href="#" data-emoji="🤢">🤢</a>
					<a href="#" data-emoji="🤮">🤮</a>
					<a href="#" data-emoji="🤧">🤧</a>
					<a href="#" data-emoji="😇">😇</a>
					<a href="#" data-emoji="🤠">🤠</a>
					<a href="#" data-emoji="🤡">🤡</a>
					<a href="#" data-emoji="🤥">🤥</a>
					
					<a href="#" data-emoji="🤫">🤫</a>
					<a href="#" data-emoji="🤭">🤭</a>
					<a href="#" data-emoji="🧐">🧐</a>
					<a href="#" data-emoji="🤓">🤓</a>
					<a href="#" data-emoji="😈">😈</a>
					<a href="#" data-emoji="💀">💀</a>
					<a href="#" data-emoji="👹">👹</a>
					<a href="#" data-emoji="👺">👺</a>
					
					<a href="#" data-emoji="👻">👻</a>
					<a href="#" data-emoji="👽">👽</a>
					<a href="#" data-emoji="🤖">🤖</a>
					<a href="#" data-emoji="😺">😺</a>
					<a href="#" data-emoji="😸">😸</a>
					<a href="#" data-emoji="😹">😹</a>
					<a href="#" data-emoji="😻">😻</a>
					<a href="#" data-emoji="😼">😼</a>
					
					<a href="#" data-emoji="😽">😽</a>
					<a href="#" data-emoji="🙀">🙀</a>
					<a href="#" data-emoji="😿">😿</a>
					<a href="#" data-emoji="😾">😾</a>
					<a href="#" data-emoji="🤲">🤲</a>
					<a href="#" data-emoji="👐">👐</a>
					<a href="#" data-emoji="🙌">🙌</a>
					<a href="#" data-emoji="👏">👏</a>
					
					<a href="#" data-emoji="🤝">🤝</a>
					<a href="#" data-emoji="👍">👍</a>
					<a href="#" data-emoji="👎">👎</a>
					<a href="#" data-emoji="👊">👊</a>
					<a href="#" data-emoji="✊">✊</a>
					<a href="#" data-emoji="🤛">🤛</a>
					<a href="#" data-emoji="🤜">🤜</a>
					<a href="#" data-emoji="🤞">🤞</a>
					
					<a href="#" data-emoji="✌">✌</a>
					<a href="#" data-emoji="🤟">🤟</a>
					<a href="#" data-emoji="🤘">🤘</a>
					<a href="#" data-emoji="👌">👌</a>
					<a href="#" data-emoji="👈">👈</a>
					<a href="#" data-emoji="👉">👉</a>
					<a href="#" data-emoji="👆">👆</a>
					<a href="#" data-emoji="👇">👇</a>
					
					<a href="#" data-emoji="☝">☝</a>
					<a href="#" data-emoji="✋">✋</a>
					<a href="#" data-emoji="🤚">🤚</a>
					<a href="#" data-emoji="🖐">🖐</a>
					<a href="#" data-emoji="🖖">🖖</a>
					<a href="#" data-emoji="🤙">🤙</a>
					<a href="#" data-emoji="💪">💪</a>
					<a href="#" data-emoji="🖕">🖕</a>
					
					<a href="#" data-emoji="✍">✍</a>
					<a href="#" data-emoji="🙏">🙏</a>
					<a href="#" data-emoji="🐁">🐁</a>
					<a href="#" data-emoji="🐂">🐂</a>
					<a href="#" data-emoji="🐅">🐅</a>
					<a href="#" data-emoji="🐇">🐇</a>
					<a href="#" data-emoji="🐉">🐉</a>
					<a href="#" data-emoji="🐍">🐍</a>
					
					<a href="#" data-emoji="🐎">🐎</a>
					<a href="#" data-emoji="🐐">🐐</a>
					<a href="#" data-emoji="🐒">🐒</a>
					<a href="#" data-emoji="🐓">🐓</a>
					<a href="#" data-emoji="🐕">🐕</a>
					<a href="#" data-emoji="🐖">🐖</a>
					
				</div>
			</div>
	</body>

</html>
<style>
	/* 消息状态 */
	.msg-read-status {
		position: absolute;
	    font-size: 12px;
	    color: #0076f6;
	    text-align: right;
	    margin-top: 6px;
		width: 80px;
		right: 0px;
	}
	
	/* emoji选择器 */
	.emoji-content {
	    /* background-color: red; */
	    position: absolute;
	    width: 100%;
	    height: 300px;
	    bottom: -300px;
	    left: 0;
	    padding: 10px; /* 添加内边距 */
	    box-sizing: border-box; /* 确保内边距和边框不会影响宽度 */
	}
	#msg-emoji-select {
	    width: 100%;
	    overflow-y: auto; /* 增加垂直滚动 */
		height: 100%; /* 确保高度占满父容器 */
	}
	#msg-emoji-select a {
	    float: left; /* 浮动到左边 */
	    width: calc(12.5% - 10px); /* 每个表情包占1/8的宽度，减去间距 */
	    box-sizing: border-box; /* 确保边框和内边距不会影响宽度计算 */
	    /* border: 1px solid blue; */
	    display: flex;
	    justify-content: center; /* 水平居中 */
	    align-items: center; /* 垂直居中 */
		font-size: 22px;
	    height: 50px; /* 固定高度 */
	    margin: 0px 5px; /* 表情包之间的间距 */
	}
	
	html,
	body {
		height: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
	}
	
	footer {
		position: fixed;
		width: 100%;
		height: 50px;
		min-height: 50px;
		left: 0px;
		bottom: 0px;
		overflow: hidden;
		padding: 0px 50px;
		background-color: #fafafa;
		max-height: 300px;
		transition: height 0.3s ease-in-out;
	}
	
	/* 头像 */
	.msg-user-img{
		border-radius: 6px;
	}
	
	.iconfont{
		font-size: 30px;
		line-height: 50px;
	}
	.footer-left {
		position: absolute;
		width: 50px;
		height: 50px;
		left: 0px;
		bottom: 0px;
		text-align: center;
		vertical-align: middle;
		line-height: 100%;
		/* padding: 12px 4px; */
	}
	
	.footer-emoji {
		position: absolute;
		width: 40px;
		height: 50px;
		right: 40px;
		bottom: 0px;
		text-align: center;
		vertical-align: middle;
		line-height: 100%;
		/* padding: 12px 5px; */
	}
	
	/* 发送按钮 */
	.footer-send {
		position: absolute;
		width: 60px;
		height: 34px;
		right: -70px;
		bottom: 8px;
		text-align: center;
		vertical-align: middle;
		line-height: 100%;
		border-radius: 10px;
		background-color: #42bd54;
		color: #fff;
		font-size: 18px;
		z-index: 999;
	}
	
	.footer-right { 
		position: absolute;
		width: 40px;
		height: 50px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		vertical-align: middle;
		line-height: 100%; 
		/* padding: 12px 5px; */ 
	}
	.footer-center [class*=input] {
		width: 85%;
		height: 40px;
		border-radius: 8px; 
		margin-top: 5px;
	} 
	.footer-center .input-text {
		background: #fff;
		border: 1px solid #ddd;
		font-size: 18px;
		font-family: verdana !important;
		overflow: hidden;
		resize: none;
		transition: height 0.3s ease-in-out;
	}
	.footer-center .input-sound {
		background-color: #eee;
	}
	.mui-content {
		height: 100%;
		padding: 44px 0px 50px 0px;
		overflow: auto;
		background-color: #eaeaea;
	}
	#msg-list {
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	.msg-item {
		padding: 8px;
		clear: both;
	}
	.msg-item .mui-item-clear {
		clear: both;
	}
	.msg-item .msg-user {
		width: 38px;
		height: 38px;
		display: inline-block;
		border-radius: 3px;
		vertical-align: top;
		text-align: center;
		float: left;
		color: #ddd;
	}
	
	
	/* 昵称 */
	.msg-item .msg-nickname {
		color: #333;
		font-size: 12px;
		padding-left: 70px;
		width: 200px;
		position: relative;
		height: 20px;
	}
	
	/* 消息内容 */
	.msg-item .msg-content {
		display: inline-block;
		border-radius: 5px;
		background-color: #ffffff;
		color: #333;
		padding: 8px;
		vertical-align: top;
		font-size: 16px;
		position: relative;
		margin: 0px 13px;
		max-width: 75%;
		min-width: 35px;
		float: left;
	}
	.play-state {
		word-break: break-all;
	}
	.msg-item .msg-content .msg-content-inner {
		overflow-x: hidden;
	}
	.msg-item .msg-content .msg-content-arrow {
		position: absolute;
		/* border: 1px solid #d3d3d3; */
		border-right: none;
		border-top: none;
		background-color: #fff;
		width: 10px;
		height: 10px;
		left: -5px;
		top: 15px;
		-webkit-transform: rotateZ(45deg);
		transform: rotateZ(45deg);
	}
	.msg-item-self .msg-user,
	.msg-item-self .msg-content {
		float: right;
	}
	.msg-item-self .msg-content .msg-content-arrow {
		left: auto;
		right: -5px;
		-webkit-transform: rotateZ(225deg);
		transform: rotateZ(225deg);
	}
	.msg-item-self .msg-content,
	.msg-item-self .msg-content .msg-content-arrow {
		background-color: #4cd964;
		color: #000;
		border-color: #2ac845;
		padding-left: 12px;
		margin-bottom: 12px;
	}
	.msg-content-error {
		position: absolute;
		width: 100%;
		height:100%;
		left: 0px;
		top: 0px;
	}
	.msg-content-error {
		right: auto;
		left: -25px;
	}
	footer .mui-icon {
		color: #000;
	}
	footer .mui-icon:active {
		color: #007AFF !important;
	}
	
	#send-btn {
		/* margin-left: 50px; */
		content: "发送";
		height: 90%;
		font-size: 20px;
		background-color: #2ac845;
		align-items: center;
		display: inline-block; 
		border: 1px solid red;
		width: 60px;
		border-radius: 10px;
	}
	
	footer .mui-icon-paperplane {
		transform: translateX(-20px);
	}
	#msg-sound {
		-webkit-user-select: none !important;
		user-select: none !important;
	}
	
	.rprogress {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 140px;
		height: 140px;
		margin-left: -70px;
		margin-top: -70px;
		background-image: url(./image/start.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 30px 30px;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 5px;
		display: none;
		-webkit-transition: .15s;
	}
	.rschedule {
		background-color: rgba(0, 0, 0, 0);
		border: 5px solid rgba(0, 183, 229, 0.9);
		opacity: .9;
		border-left: 5px solid rgba(0, 0, 0, 0);
		border-right: 5px solid rgba(0, 0, 0, 0);
		border-radius: 50px;
		box-shadow: 0 0 15px #2187e7;
		width: 46px;
		height: 46px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -23px;
		margin-top: -23px;
		-webkit-animation: spin 1s infinite linear;
		animation: spin 1s infinite linear;
	}
	.r-sigh {
		display: none;
		border-radius: 50px;
		box-shadow: 0 0 15px #2187e7;
		width: 46px;
		height: 46px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -23px;
		margin-top: -23px;
		text-align: center;
		line-height: 46px;
		font-size: 40px;
		font-weight: bold;
		color: #2187e7;
	}
	.rprogress-sigh {
		background-image: none !important;
	}
	.rprogress-sigh .rschedule {
		display: none !important;
	}
	.rprogress-sigh .r-sigh {
		display: block !important;
	}
	.rsalert {
		font-size: 12px;
		color: #bbb;
		text-align: center;
		position: absolute;
		border-radius: 5px;
		width: 130px;
		margin: 5px 5px;
		padding: 5px;
		left: 0px;
		bottom: 0px;
	}
	
	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	
	#h {
		background: #fff;
		border: 1px solid #ddd;
		padding: 10px !important;
		font-size: 18px !important;
		font-family: verdana !important;
		line-height: 20px !important;
		overflow: visible;
		position: absolute;
		left: -1000px;
		right: 0px;
		word-break: break-all;
		word-wrap: break-word;
	}
	
	.cancel {
		background-color: darkred;
	}
</style>